<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div id="app">
        <!-- 在这个div的内部显示: 我的名字叫:小明, 其中小明是data中的数据 -->
        <div v-cloak>我的名字叫:{{msg2}}</div>
        <!-- 使用三种方式在这个div中显示: Hello Vue -->
        <div v-text='msg'></div>
        <!-- 在这个div中显示msg1的值, 要求能够解析html标签样式 -->
        <div v-html='msg1'></div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                msg1: '<h1 style="color:red">HTML</h1>',
                msg2: '小明'
            }
        });
    </script>
</body>

</html>